<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <title>muugyjUI-模态框</title>
  <link rel="stylesheet" href="../src/muugyj-ui.css">
</head>
<body>
  <div class="gy-header">
    <div class="left"><i class="fa fa-chevron-left"></i></div>
    <div class="title">muugyjUI-模态框</div>
    <div class="right"><i class="fa fa-ellipsis-h"></i></div>
  </div>
  <div class="gy-navbar">
    <a href="" class="navbar-item">
      <i class="fa fa-home icon"></i>
      <span class="name">首页</span>
    </a>
    <a href="" class="navbar-item active">
      <i class="fa fa-list icon"></i>
      <span class="name">分类</span>
    </a>
    <a href="" class="navbar-item">
      <i class="fa fa-search icon"></i>
      <span class="name">发现</span>
    </a>
    <a href="" class="navbar-item">
      <i class="fa fa-user-o icon"></i>
      <span class="name">我的</span>
    </a>
  </div>
  <div class="gy-content">
    <p>内容区</p>
  </div>
  <!-- 基础模态框 -->
  <div class="gy-modal show">
    <div class="gy-mask"></div>
    <div class="gy-modal-wrap">
      <div class="gy-modal-body">
        <p>您的会员即将到期，请及时续费，以免影响您的权益。</p>
      </div>
      <div class="gy-modal-footer">
        <a href="" class="gy-btn">下次再说</a>
        <a href="" class="gy-btn">立即续费</a>
      </div>
    </div>
  </div>

  <!-- 海报样式模态框的设置与开发 -->
  <div class="gy-modal show">
    <div class="gy-mask"></div>
    <div class="gy-modal-wrap">
      <div class="gy-modal-body no-padding">
        <img src="" alt="" class="gy-modal-img">
      </div>
      <i class="fa fa-close gy-modal-close"></i>
    </div>
  </div>
</body>
</html>